import React from 'react';
import {
  Layout,
  Table,
  Button,
  Menu,
  Input,
  Tooltip,
  Space,
  Select,
  Switch,
  message,
  Modal,
} from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import './GoodsComments.css';
import axios from '../../../utils/http';
import DateFormat from '../../../utils/dateFormat';
const { Header, Content } = Layout;
const { Column } = Table;
const { Option } = Select;
const { confirm } = Modal;
class GoodsComments extends React.Component {
  state = {
    commentList: [],
    op: '1',
    opCommentList: [] /* 选中的评论 */,
    searchComment: '',
    isShow: true,
  };
  componentDidMount = () => {
    this.getAllComment(true);
  };
  /* 获取所有评论 */
  getAllComment = bool => {
    axios({
      url: '/mm-goods/goods/qureyPr',
      method: 'get',
    }).then(({ data }) => {
      let newArr = data.data.map(item => {
        item.pr_ct = DateFormat(new Date(item.pr_ct), 'yyyy-MM-dd hh:mm:ss');
        return item;
      });
      let Arr = newArr.filter(item => !!item.pr_os === bool);
      this.setState({
        commentList: Arr,
      });
    });
  };
  /* 依据选择状态显示数据 */
  changeShow = bool => {
    this.setState({
      isShow: bool,
    });
    this.getAllComment(bool);
  };

  /* 更改评论状态 */
  changeCommentState = (id, val) => {
    let url = val === true ? '/mm-goods/goods/updPr' : '/mm-goods/goods/updPrUn';
    let str = val === true ? '评论开启成功' : '评论关闭成功';
    let prIds = typeof id === 'number' ? [id] : [...id];
    axios({
      url,
      method: 'post',
      data: {
        prIds,
      },
    }).then(({ data }) => {
      if (data.code === 200) {
        message.success(str);
        this.getAllComment(this.state.isShow);
      }
    });
  };
  /* 更改评论推荐状态 */
  changeRecommend = (id, state) => {
    axios({
      url: '/mm-goods/goods/updtePrTj',
      method: 'get',
      params: {
        prId: id,
        prRs: state === true ? 1 : 0,
      },
    }).then(({ data }) => {
      if (data.code === 200) {
        message.success('评论推荐成功！');
        this.getAllComment(this.state.isShow);
      }
    });
  };
  /* 更改操作类型 */
  changeOp = val => {
    this.setState({
      op: val,
    });
  };
  /* 批量操作确认 */
  opreateComfirm = () => {
    switch (this.state.op) {
      case '1':
        /* 删除评论 */
        this.delComments(this.state.opCommentList);
        break;
      case '2':
        /* 批量显示评论 */
        this.changeCommentState(this.state.opCommentList, true);
        break;
      case '3':
        /* 批量隐藏评论 */
        this.changeCommentState(this.state.opCommentList, false);
        break;
      default:
        break;
    }
  };
  /* 绑定输入框 */
  setSearch = val => {
    this.setState({
      searchComment: val,
    });
  };
  /* 回车搜索 */
  enterSearch = e => {
    if (e.key === 'Enter') {
      this.search();
    }
  };
  /* 搜索评论 */
  search = () => {
    if (this.state.searchComment !== '') {
      axios({
        url: '/mm-goods/goods/selPr',
        method: 'get',
        params: {
          prComments: this.state.searchComment,
        },
      }).then(({ data }) => {
        if (data.code === 200) {
          let arr = data.data.filter(item => !!item.pr_os === this.state.isShow);
          arr = arr.map(item => {
            item.pr_ct = DateFormat(new Date(item.pr_ct), 'yyyy-MM-dd hh:mm:ss');
            return item;
          });
          message.success('查询成功');
          this.setState({
            commentList: arr,
          });
        }
      });
    } else {
      message.warn('请输入内容后查询');
    }
  };
  /* 重置查询 */
  resetSearch = () => {
    this.getAllComment(this.state.isShow);
    this.setState({
      searchComment: '',
    });
  };
  /* 删除评论 */
  delComment = (id, user, content) => {
    confirm({
      title: '确认要删除该条评论吗?',
      icon: <ExclamationCircleOutlined />,
      content: `${user} : ${content}`,
      okText: '确认',
      okType: 'danger',
      cancelText: '再想想',
      onOk() {
        axios({
          url: '/mm-goods/goods/delPr',
          method: 'post',
          data: {
            prIds: [id],
          },
        }).then(({ data }) => {
          if (data.code === 200) {
            this.getAllComment();
            message.success('删除成功');
          } else {
            message.error('删除失败');
          }
        });
      },
      onCancel() {
        message.info('取消删除评论');
      },
    });
  };
  /* 批量删除评论 */
  delComments = ids => {
    axios({
      url: '/mm-goods/goods/delPr',
      method: 'post',
      data: {
        prIds: ids,
      },
    }).then(({ data }) => {
      if (data.code === 200) {
        this.getAllComment();
        message.success('删除成功');
      } else {
        message.error('删除失败');
      }
    });
  };
  render() {
    const rowSelection = {
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          opCommentList: selectedRowKeys,
        });
      },
      onSelectAll: (selected, selectedRows, changeRows) => {
        let idArr = selectedRows.map(item => {
          return item.pr_id;
        });
        this.setState({
          opCommentList: idArr,
        });
      },
    };
    return (
      <>
        <Layout>
          <Header style={{ height: 'auto' }}>
            <h1 className="title">商品评论</h1>
            <Menu
              className="nav"
              mode="horizontal"
              defaultSelectedKeys="1"
              style={{
                background: 'transparent',
              }}
            >
              <Menu.Item key="1" onClick={() => this.changeShow(true)}>
                显示中
              </Menu.Item>
              <Menu.Item key="2" onClick={() => this.changeShow(false)}>
                隐藏中
              </Menu.Item>
            </Menu>
          </Header>
          <Content style={{ padding: '20px 20px 20px 70px' }}>
            <div style={{ width: '300px', display: 'flex', marginBottom: '20px' }}>
              <Input
                value={this.state.searchComment}
                onChange={e => this.setSearch(e.target.value)}
                placeholder="请输入评论内容"
                onKeyUp={e => this.enterSearch(e)}
              />
              <div className="searchBox">
                <Space size="middle">
                  <Tooltip title="搜索" color="#687FFB">
                    <Button
                      type="primary"
                      shape="circle"
                      icon={<span className="iconfont icon-sousuo"></span>}
                      onClick={this.search}
                    ></Button>
                  </Tooltip>
                  <Tooltip title="重置" color="#687FFB">
                    <Button
                      shape="circle"
                      icon={
                        <span
                          className="iconfont icon-zhongzhishaixuan"
                          onClick={this.resetSearch}
                        ></span>
                      }
                    ></Button>
                  </Tooltip>
                </Space>
              </div>
            </div>

            <div style={{ position: 'relative' }}>
              <Table
                rowSelection={rowSelection}
                dataSource={this.state.commentList}
                pagination={{
                  defaultPageSize: 5,
                  total: this.state.commentList.length,
                  pageSizeOptions: [5, 10, 15],
                }}
                rowKey="pr_id"
              >
                <Column align="center" title="ID" dataIndex="pr_id" key="pr_id"></Column>
                <Column
                  align="center"
                  title="用户名称"
                  dataIndex="user_xname"
                  key="user_xname"
                ></Column>
                <Column
                  align="center"
                  title="评论内容"
                  dataIndex="pr_comments"
                  key="pr_comments"
                ></Column>
                <Column align="center" title="评论时间" dataIndex="pr_ct" key="pr_ct"></Column>
                <Column
                  align="center"
                  title="推荐"
                  key="pr_rs"
                  render={({ pr_id, pr_rs }) => {
                    return (
                      <Switch
                        defaultChecked={!!pr_rs}
                        onChange={val => this.changeRecommend(pr_id, val)}
                      />
                    );
                  }}
                ></Column>
                <Column
                  align="center"
                  title="状态"
                  key="pr_os"
                  render={({ pr_id, pr_os }) => {
                    return (
                      <Switch
                        defaultChecked={!!pr_os}
                        onChange={val => this.changeCommentState(pr_id, val)}
                      />
                    );
                  }}
                ></Column>
                <Column
                  align="center"
                  title="操作"
                  key="pr_os"
                  render={({ pr_id, pr_comments, user_xname }) => {
                    return (
                      <Button
                        type="primary"
                        onClick={() => this.delComment(pr_id, user_xname, pr_comments)}
                      >
                        删除
                      </Button>
                    );
                  }}
                ></Column>
              </Table>
              <div className="addrecy-btn">
                <Space size="middle">
                  <Select
                    defaultValue={this.state.op}
                    onChange={e => this.changeOp(e)}
                    bordered={false}
                  >
                    <Option value="1">删除评论</Option>
                    <Option value="2">允许显示</Option>
                    <Option value="3">禁止显示</Option>
                  </Select>
                  <Button onClick={this.opreateComfirm}>确定</Button>
                </Space>
              </div>
            </div>
          </Content>
        </Layout>
      </>
    );
  }
}
export default GoodsComments;
